<template>
  <section class="cart-board cover">
    <div class="container">
      <ul class="cart-board-title">
        <li>选择</li>
        <li>商品名称</li>
        <li>图片</li>
        <li>单价</li>
        <li>数量</li>
        <li>总价</li>
        <li>删除</li>
      </ul>
      <div class="cart-item" v-for="(item, index) in cartData" :key="item.productId">
        <div class="cart-item-select">
          <input
            type="checkbox"
            @click="editCart('check', index)"
            :checked="item.checked"
          />
        </div>
        <div class="cart-item-name">{{ item.productName }}</div>
        <div class="cart-item-img">
          <img :src="'/images/' + item.productImage" :alt="item.productName" />
        </div>
        <div class="cart-item-price">{{ item.productPrice | currency }}</div>
        <div class="cart-item-count">
          <div class="count-area">
            <a href="javascript:;" @click="editCart('plus', index)">+</a>
            <span>{{ item.productCount }}</span>
            <a href="javascript:;" @click="editCart('minus', index)">-</a>
          </div>
        </div>
        <div class="cart-item-total">
          <span class="price-num">{{
            (item.productCount * item.productPrice) | currency
          }}</span>
        </div>
        <div class="cart-item-remove">
          <a href="javascript:;" @click="delItem(item)">删除</a>
        </div>
      </div>
      <div class="cart-board-footer">
        <div class="total-price">
          <span class="price-text"
            >总价：<span class="price-num">{{ totalPrice | currency }}</span></span
          >
          <button class="total-button" @click="goPage('address')">结算</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { cartBoardItem } from "@/types/index";
import axios from "axios";

@Component({
  name: "CartBoard",
  filters: {
    currency: function (value: number) {
      if (!value) return "￥0.00";
      value = value * 1;
      return "￥" + value.toFixed(2);
    },
  },
})
export default class CartBoard extends Vue {
  private cartData: cartBoardItem[] = [];

  getCardData() {
    axios.get("/mock/cart.json").then((response) => {
      const res = response.data;
      const data = res.data;
      this.cartData = data;
    });
  }

  editCart(option: string, index: number) {
    switch (option) {
      case "plus":
        this.cartData[index].productCount++;
        break;
      case "minus":
        this.cartData[index].productCount--;
        break;
      case "check":
        this.cartData[index].checked = !this.cartData[index].checked;
        break;
      default:
        break;
    }
  }

  delItem(item: cartBoardItem) {
    this.cartData.forEach((elem, index) => {
      if (elem.productId === item.productId) {
        this.cartData.splice(index, 1);
      }
    });
  }

  goPage(pageName: string) {
    this.$router.push({ name: pageName });
  }

  created() {
    this.getCardData();
  }

  get totalPrice() {
    let tPrice = 0;
    this.cartData.forEach((elem, index) => {
      if (elem.checked) {
        tPrice += elem.productPrice * elem.productCount;
      }
    });
    return tPrice;
  }
}
</script>

<style lang="scss" scoped>
$item-total-width: 1226px;

.cart-board {
  .container {
    width: 1226px;
    margin: 0 auto;
    background: #fff;

    .cart-board-title {
      list-style: none;
      width: 100%;
      background-color: #acacac;

      li {
        display: inline-block;
        width: 14%;
        height: 50px;
        line-height: 50px;
      }
    }

    .cart-item {
      width: 100%;
      height: 100px;
      border: 1px solid #acacac;

      div {
        display: inline-block;
        width: 14%;
        line-height: 100px;
      }

      .cart-item-img {
        img {
          margin-top: 10px;
          height: 80px;
          vertical-align: top;
        }
      }

      .cart-item-count {
        .count-area {
          background-color: #b4b4b4;
          height: 22px;
          width: 62px;
          line-height: 20px;
          text-align: center;
          border: 1px solid #b4b4b4;
          a {
            display: inline-block;
            width: 20px;
            height: 20px;
          }
          span {
            display: inline-block;
            background-color: #fff;
            width: 20px;
            height: 20px;
          }
        }
      }
    }

    .cart-board-footer {
      height: 40px;
      text-align: right;
      border: 1px solid #acacac;
      border-top: none;

      .total-price {
        height: 100%;

        .price-text {
          color: #b4b4b4;
          line-height: 40px;
          margin-right: 2rem;
        }
        .total-button {
          width: 100px;
          height: 100%;
          background-color: #f40;
          color: #fff;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }

    .price-num {
      color: #f40;
      font-weight: bold;
    }
  }
}
</style>
